<template>
  <div class="sy">
    <div class="header-box">
      <div class="header">
        <ul>
          <router-link
            v-for="(item, index) in arr"
            :key="index"
            :to="'/' + item.site"
          >
            <li
              :class="['active', { active2: currentIndex === item.id }]"
              @click="activeHandle(item.id, item.site)"
            >
              {{ item.title }}
            </li>
          </router-link>
        </ul>
        <div class="Create-group" @click="CreateGroupHandle">创建小组</div>
        <van-overlay :show="show" @click="show = false">
          <div class="wrapper">
            <div class="block">创建小组</div>
          </div>
        </van-overlay>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      currentIndex: 1001,
      arr: [
        {
          id: 1001,
          name: "first",
          title: "全部小组",
          site: "blueberryjam",
        },
        {
          id: 1002,
          name: "second",
          title: "热门小组",
          site: "blueberryjam/gotgroup",
        },
        {
          id: 1003,
          name: "third",
          title: "推荐小组",
          site: "blueberryjam/recommendgroup",
        },
      ],
    };
  },
  methods: {
    activeHandle(index, site) {
      this.currentIndex = index;
    },
    CreateGroupHandle() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.sy {
  background: #f2f2f2;
}
.header-box {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: #fff;
}
.header {
  width: 1200px;
  margin: 0 auto;
  position: relative;

  ul {
    overflow: hidden;
  }
}
.active {
  float: left;
  padding: 20px 30px;
  color: #000;
}
.active:hover {
  color: #109d59;
}
.active2 {
  color: #109d59;
  position: relative;
}
.active2::after {
  content: "";
  height: 5px;
  width: 100%;
  background: #109d59;
  position: absolute;
  bottom: 0;
  left: 0;
}
.Create-group {
  padding: 2px 10px;
  border: 2px solid #109d59;
  border-radius: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  color: #109d59;
  font-size: 12px;
  cursor: pointer;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 1000px;
  height: 500px;
  background-color: #fff;
  color: #000;
  font-size: 20px;
}
</style>
